<template>
  <div>
    <el-container class="ov-hidden full-height">
      <el-container>
        <!-- 主体信息 -->
        <el-main class="main-box no-padding">
          <div id="lumenChatPanel" class="talks-container lum-scrollbar" @scroll="talkPanelScroll($event)">
            <!-- 数据加载状态栏 -->
            <div class="loading-toolbar">
              <span v-if="loadRecord.status == 0" class="color-blue">
                <i class="el-icon-loading" /> 正在加载数据中...
              </span>
              <span v-else-if="loadRecord.status == 1" class="pointer color-blue" @click="loadChatRecords" >
                <i class="el-icon-bottom" /> 查看更多消息...
              </span>
              <span v-else> 没有更多消息了... </span>
            </div>
            <!-- 消息主体 -->
            <div v-for="(item, idx) in params.dataTalkLists" :key="item.id">
              <!-- 群消息 -->
              <div v-if="item.msgType == 'invite'" class="message-box">
                <invite-message @cat="catFriendDetail" :invite="item.invite" />
              </div>
              <!-- 撤回消息 -->
              <div v-else-if="item.isRevoke == 1" class="message-box">
                <revoke-message :item="item" />
              </div>
              <div v-else-if="item.msgType == 'system'" class="message-box">
                <system-text-message :content="item.msgText" />
              </div>
              <!-- 其它对话消息 -->
              <div v-else class="message-box record-box" :class="{ 'direction-rt': item.side == 'right'}">
                <aside class="avatar-column">
                  <el-avatar class="pointer" :size="30" :src="item.avatar?item.avatar:$store.state.detaultAvatar" @click.native="catFriendDetail(item.code)" />
                </aside>
                <main class="main-column">
                  <div class="talk-title">
                    <span v-show="params.type == 1 || (params.type == 2 && item.side == 'right') " class="time">
                      <i class="el-icon-time" /> {{ parseTime(item.msgTime, '{m}月{d}日 {h}:{i}') }}
                    </span>
                  </div>
                  <div class="talk-content">
                    <span v-show="params.type == 2 && item.side == 'left'" class="nickname">{{ item.name || item.nickName }}</span>
                    <!-- 文本消息 -->
                    <text-message v-if="item.msgType == 'text'" :content="item.msgText" :float="item.side" :full-width="false" :arrow="true" />
                    <!-- 图片消息 -->
                    <image-message v-else-if="item.msgType == 'image'" :src="item.file.filePath" />
                    <!-- 音频文件预留 -->
                    <audio-message v-else-if="item.msgType == 'voice'" :src="item.file.filePath"  />
                    <!-- 视频文件预留 -->
                    <video-message v-else-if="item.msgType == 'video'" :src="item.file.filePath" />
                    <!-- 文件消息 -->
                    <file-message v-else-if="item.msgType == 'file'" :file="item.file" :record_id="item.id" />
                    <!-- 位置消息 -->
                    <location-message v-else-if="item.msgType == 'location'" :lat="item.location.latitude" :lng="item.location.longitude" />
                    <!-- 未知消息 -->
                    <div class="unknown-msg" v-else> 未知消息类型[{{ item.msgType }}] </div>
                    <!-- 消息引用(预留) -->
                    <!-- <reply-message /> -->
                  </div>
                </main>
              </div>
              <!-- 消息时间 -->
              <div v-show="compareTime(idx, item.msgTime)" class="datetime no-select" v-text="sendTime(item.msgTime)" />
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { formateTime, parseTime, copyTextToClipboard } from '@/utils/functions'
import AudioMessage from './components/AudioMessage'
import FileMessage from './components/FileMessage'
import ImageMessage from './components/ImageMessage'
import LocationMessage from './components/LocationMessage'
import ReplyMessage from './components/ReplyMessage'
import RevokeMessage from './components/RevokeMessage'
import SystemTextMessage from './components/SystemTextMessage'
import TextMessage from './components/TextMessage'
import VideoMessage from './components/VideoMessage'
import VoiceMessage from './components/VoiceMessage'
import InviteMessage from './components/InviteMessage'
export default {
  components: {
    AudioMessage, FileMessage,ImageMessage,LocationMessage,
    ReplyMessage,RevokeMessage,SystemTextMessage,TextMessage,
    VideoMessage,VoiceMessage,InviteMessage
  },
  props: {
    // 对话相关参数
    params: {
      type: Object,
      default: function() {
        return {
          type: 0,
          code: '0'
        }
      }
    }
  },
  data() {
    return {
      uid: 1242,
      // 记录加载相关参数
      loadRecord: {
        status: 1,
        minRecord: 0,
      },
      records: []
    }
  },
  computed: {
  },
  watch: {
    params() {
      this.loadRecord.minRecord = 0
      this.loadChatRecords()
    },
  },
  mounted() {
    this.loadChatRecords()
  },
  methods: {
    parseTime,
    sendTime: formateTime,
    loadChatRecords() {
      this.records = this.params.dataTalkLists
      const user_id = this.uid
      const data = {
        record_id: this.loadRecord.minRecord,
        receiver_id: this.params.code,
        talk_type: this.params.type,
        limit: 30
      }

      this.loadRecord.status = 2
      // let el = document.getElementById('lumenChatPanel')
      // let scrollHeight = el.scrollHeight

      // ServeTalkRecords(data).then(res => {
      //     // 防止点击切换过快消息返回延迟，导致信息错误
      //     if (res.code != 200 || (data.receiver_id != this.params.receiver_id && data.talk_type != this.params.talk_type)) {
      //       return
      //     }
      //     const records = res.data.rows.map(item => {
      //       item.float = 'center'
      //       if (item.user_id > 0) {
      //         item.float = item.user_id == user_id ? 'right' : 'left'
      //       }
      //       return item
      //     })
      //     // 判断是否是初次加载
      //     if (data.record_id == 0) {
      //       this.$store.commit('SET_DIALOGUE', [])
      //     }
      //     this.$store.commit('UNSHIFT_DIALOGUE', records.reverse())
      //     this.loadRecord.status = records.length >= res.data.limit ? 1 : 2
      //     this.loadRecord.minRecord = res.data.record_id
      //     this.$nextTick(() => {
      //       if (data.record_id == 0) {
      //         el.scrollTop = el.scrollHeight
      //       } else {
      //         el.scrollTop = el.scrollHeight - scrollHeight
      //       }
      //     })
      //   }).catch(() => {
      //     this.loadRecord.status = 1
      //   })
    },
    // 处理消息时间是否显示
    compareTime(index, datetime) {
      if (datetime == undefined) {
        return false
      }
      if (this.records[index].isRevoke == 1) {
        return false
      }
      datetime = datetime.replace(/-/g, '/')
      let time = Math.floor(Date.parse(datetime) / 1000)
      let currTime = Math.floor(new Date().getTime() / 1000)
      // 当前时间5分钟内时间不显示
      if (currTime - time < 300) return false
      // 判断是否是最后一条消息,最后一条消息默认显示时间
      if (index == this.records.length - 1) {
        return true
      }
      let nextDate = this.records[index + 1].msgTime.replace(/-/g, '/')
      return !(parseTime(new Date(datetime), '{y}-{m}-{d} {h}:{i}') == parseTime(new Date(nextDate), '{y}-{m}-{d} {h}:{i}'))
    },
    // 查看好友用户信息
    catFriendDetail(value) {
      this.$user(value)
    },
    // 对话面板滚动事件
    talkPanelScroll(e) {
      if (e.target.scrollTop == 0 && this.loadRecord.status == 1) {
        this.loadChatRecords()
        return
      }
    },
    // 聊天版本滚动到底部
    talkPanelScrollBottom() {
      let el = document.getElementById('lumenChatPanel')
      el.scrollTop = el.scrollHeight
    }
  }
}
</script>
<style lang="scss">
.main-box {
  position: relative;
}
.talks-container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 15px 30px;
  overflow-y: auto;
  .message-box {
    width: 100%;
    min-height: 20px;
    margin-bottom: 2px;
  }

  .loading-toolbar {
    height: 30px;
    line-height: 30px;
    margin: 5px 0;
    text-align: center;
    user-select: none;
    font-size: 13px;
    color: #cec4c4;
    .color-blue {
      color: #409eff;
    }
  }
  .datetime {
    height: 30px;
    line-height: 30px;
    color: #ccc9c9;
    font-size: 12px;
    text-align: center;
    margin: 5px 0;
  }
  .record-box {
    display: flex;
    flex-direction: row;
    transition: 0.5s ease;
    margin-bottom: 5px;
    .avatar-column {
      width: 20px;
      flex-basis: 20px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      order: 3;
      user-select: none;
      padding-top: 10px;
      flex-direction: column;
      background-color: #ffffff;
    }
    .main-column {
      flex: 1 auto;
      order: 3;
      position: relative;
      box-sizing: border-box;
      padding: 0px 5px 0px 5px;
      overflow: hidden;
      .talk-title {
        display: flex;
        align-items: center;
        height: 10px;
        margin-bottom: 2px;
        font-size: 10px;
        user-select: none;
        color: #a7a0a0;
        opacity: 0;
        transition: 0.5s ease;
        &.show {
          opacity: 1 !important;
        }
        span {
          transform: scale(0.9);
        }
      }
      .talk-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-sizing: border-box;
        width: 100%;
        .nickname {
          font-size: 12px;
          color: #a7a0a0;
          margin: -4px 0 4px -8px;
          transform: scale(0.9);
        }
      }
      &:hover {
        .talk-title {
          opacity: 1;
        }
      }
    }
    &.direction-rt {
      .avatar-column {
        order: 3;
      }
      .main-column {
        order: 2;
        .talk-title {
          justify-content: flex-end;
        }
        .talk-content {
          align-items: flex-end;
        }
      }
    }
  }
}
.lum-scrollbar::-webkit-scrollbar {
  background-color: #ffffff;
}
</style>
